<template>
  <div class="home">
      <el-row type="flex" justify="center" class="home-head" :class="navHeight ? 'nav-height' : 'no-nav-height'" >
          <el-col :span="2">
              <div class="logo">
                <el-image :src="require('../assets/logo.png')" alt="logo" />
              </div>
          </el-col>
          <el-col :span="20">
            <nav>
                <i class="el-icon-menu menu"  @click="navOnClick" ></i>
                <el-button type="primary"><i class="el-icon-user"></i>个人信息</el-button>
                <el-button type="primary"><i class="el-icon-user"></i>我的订单</el-button>
                <el-button @click="message.add=true" type="primary"><i class="el-icon-user"></i>发布资讯</el-button>
                <el-button @click="office.add=true" type="primary"><i class="el-icon-user"></i>申请机构</el-button>
                <el-button @click="goAddmin" type="primary"><i class="el-icon-user"></i>后台管理</el-button>
            </nav>
          </el-col>
      </el-row>
      <div class="home-head-img">
          <h2>校园物资管理平台</h2>
          <p>学校为了在物资管理上做足准备及其交流，开发此平台来管理物资及学生借用物资等申请</p>
      </div>
      <div class="supplies">

      </div>
      <div class="content">
          <div class="message">
              <h2>校园资讯</h2>
              <div class="list">
                  <div v-if="messages.length == 0" class="list-empty">
                      当前没有任何资讯消息
                  </div>
                  <List :list="messages" />
              </div>
          </div>
          <div class="office">
              <h2>校园机构列表</h2>
              <div class="list">
                  <div v-if="messages.length == 0" class="list-empty">
                      当前没有任何资讯消息
                  </div>
                  <List :list="offices" />
              </div>
          </div>
      </div>

      <OfficeAdd @close="office.add=false" :user-id="userInfo.id" :show="office.add" />
      <MessageAdd @close="message.add=false" :user-id="userInfo.id" :show="message.add" />
  </div>

</template>

<script>
// @ is an alias to /src

import List from "../components/home/list";
import MessageAdd from "../components/home/MessageAdd";
import OfficeAdd from "../components/home/OfficeAdd";
export default {
  name: 'Home',
  components: {OfficeAdd, MessageAdd, List},
  data: function () {
    return {
      navHeight: true,
      messages: [],
      message: {
        add: false,
      },
      office: {
        add: false,
      },

      offices: [],
      userInfo: {
        id: "2e4a3bb2-d82c-5f85-b315-004092f1ef66",
      },

    }
  },
  mounted() {
    this.getMessages();
    this.getOffices();
  },
  methods: {
    navOnClick(){
      this.navHeight = !this.navHeight;
    },
    getMessages(){
      this.$api.message.getMessages()
      .then(res => {
        this.messages = res.data.map(item => {
          item.name = item.title;
          return item;
        });
      })
    },
    getOffices(){
      this.$api.office.getOffices()
      .then(res => {
        this.offices = res.data;
      })
    },
    goAddmin(){
      this.$router.push("admin")
    }
  }
}
</script>

<style lang="scss" scoped>
    @import "../style/variable";
    .home{
        margin-top: 40px;
        overflow: hidden;
        .home-head{
            &.nav-height{
                height: 40px;
            }
            &.no-nav-height {
                height: 100vh;
            }
            transition: height 0.35s ease;

            height: 40px;
            background-color: $bg-color;
            position: fixed;
            width: 100%;
            top: 0;left: 0;
            z-index: 10;

            text-align: center;
            line-height: 40px;
            .logo{
                width: 40px;
                height: 40px;
                margin: 0 auto;
                position: absolute;
                z-index: 3;
            }

            nav{
                height: 100%;
                display: flex;
                flex-flow: row nowrap;
                justify-content: flex-end;

                .menu{
                    color: white;
                    display: none;
                    width: 20%;
                    line-height: 40px;
                    max-width: 120px;
                    min-width: 40px;
                    max-height: 40px;
                }

                button{
                    margin: 0;
                    padding: 0;
                    width: 20%;
                    min-width: 100px;
                    max-width: 120px;
                    max-height: 40px;
                }
            }
        }

        .home-head-img{
            height: 80vh;

            display: flex;
            flex-flow: column wrap;
            justify-content: center;
            align-items: center;
            position: relative;
            &::before,&::after{
                content: '';
                position: absolute;
                width: 100%;
                height: 100%;
            }
            &::before{
                background-color: rgba(0,0,0,.1);
                z-index: -1;
            }
            &::after{
                background: url("../assets/home.jpg") no-repeat;
                background-size: cover;
                z-index: -2;
            }

            h2{
                color: white;
            }
            p{
                color: white;
                padding: 0px 5vw;
            }
        }

        .content{
            width: 100vw;
            display: grid;
            grid-template-columns: repeat(2,48vw);
            justify-content: space-around;
            > div {
                h2{
                    color: $bg-color;
                    font-size: 16px;
                    text-align: center;
                    padding: 0 0 10px;
                    border-bottom: 1px solid $bg-color;
                }
            }
            .message{

            }
            .office{

            }
        }
    }

    @media screen and (max-width: 920px) {
        .home{

            .content{
                grid-template-columns: repeat(0,100vw);
            }

            .home-head{
                height: 40px;
                overflow: hidden;
                nav{
                    /*background-color: #409eff;*/
                    top: 0;
                    height: 100vh;
                    position: absolute;
                    flex-flow: column wrap;
                    justify-content: flex-start;
                    align-items: flex-end;
                    background-color: $bg-color;
                    left: 0;
                    button{
                        /*border: 0;*/
                        border-radius: 0;
                        width: 100vw;
                        max-width: 100vw;
                        height: 40px;
                    }

                    .menu{
                        color: white;
                        display: block;
                        width: 120px;
                        text-align: center;
                        padding-left: 20px;
                        cursor: pointer;
                    }

                }
            }
        }
    }
</style>
